<template>
	<div class="system-action-log-container standard-container layout-padding layout-pd">
		<div class="review-list-title">
			<div class="title-actions">
				<el-button size="default" type="primary" class="ml10" @click="getTableData">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
			</div>
		</div>
		<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
      <el-table-column prop="operator" label="操作人" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column prop="operationType" label="操作类型" show-overflow-tooltip width="150"></el-table-column>
      <el-table-column prop="msg" label="操作内容" show-overflow-tooltip width="400">
				<template #default="scope">
					<div class="action-msg">{{ scope.row.msg }}</div>
				</template>
			</el-table-column>
			<el-table-column prop="url" label="接口url" show-overflow-tooltip></el-table-column>
			<el-table-column prop="status" label="操作状态" show-overflow-tooltip>
				<template #default="scope">
					<el-tag v-if="scope.row.status == 'success'">成功</el-tag>
					<el-tag v-else @click="viewErrMsg(scope.row.errMsg)" class="cursor-pointer" type="danger">失败</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="clientIp" label="客户端ip" show-overflow-tooltip></el-table-column>
			<el-table-column prop="localIp" label="服务ip" show-overflow-tooltip></el-table-column>
			<el-table-column prop="source" label="来源" show-overflow-tooltip>
				<template #default="scope">
					<el-tag v-if="scope.row.source == 'server'">管理端</el-tag>
					<el-tag v-else>客户端</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="操作时间" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button size="small" text type="primary" @click="onOpen(scope.row.id)">查看</el-button>
					<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>
		<Dialog ref="DialogRef"></Dialog>

		<el-drawer v-model="errMsgFlag" title="异常信息" size="40%">
			<div class="err-msg">
				<pre style="overflow: auto">
              {{ errMsg }}
          </pre
				>
			</div>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ActionLogApi } from '/@/api/log/action/index';
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';

import msg from '/@/utils/messageUtils';
import { ElMessage, ElMessageBox } from 'element-plus';

const Dialog = defineAsyncComponent(() => import('./dialog.vue'));
const DialogRef = ref();
const state = reactive({
	search: {
		name: '',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

let errMsg = ref('hello world');
let errMsgFlag = ref(false);

const getTableData = async () => {
	try {
		const { data } = await ActionLogApi().search({
			offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
			limit: state.tableData.paging.pageSize,
		});
		state.tableData.data = data.datas;
		state.tableData.paging.currentPage = data.paging.currentPage;
		state.tableData.paging.totalCount = data.paging.totalCount;
		console.log('result: ', data);
	} catch (e) {
		console.log('error: ', e);
		msg().error('查询失败，请稍后重试');
	}
};
// 分页改变
const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};

const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久当前行为日志”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await ActionLogApi().delete(row.id);
			getTableData();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};

const onOpen = (id: string) => {
	DialogRef.value.openDialog(id);
};

const viewErrMsg = (msg: string) => {
	console.log(msg);
	errMsg.value = msg;
	errMsgFlag.value = true;
};
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-action-log-container {
	.el-table {
		flex: 1;
	}
}

.err-msg {
}

.action-msg {
	//height: 50px;
	//white-space: wrap;
	//width: 100%;
	//display: flex;
	//justify-content: center;
	//align-items: center;
	//overflow: auto;
}
</style>
